<template>
    <div class="app">
      <h3>饿了么</h3>
      <div class="text">
          <div>
              <div class="box"></div>
              <div class="title">
                  <p>7a9aa5a077a</p>
                  <span>194*****2345</span>
              </div>
          </div>
          <div class="set">账户设置</div>
      </div>
  
      <div class="banner">
      <img
        src="https://img0.baidu.com/it/u=3963321963,3651668528&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=192"
        alt=""
      />
    </div>
    <div class="hong">
      <div class="bao">
          红包
      </div>
      <div class="yv">
         余额
      </div>
    </div>
    <div class="tools">
      <div class="biao">常用工具</div>
      <div class="dizhi">
          <span v-for="(item,index) in arr" :key="index">{{item}}</span>
      </div>
    </div>
    </div>
  </template>
  
  <script>
  export default {
      data(){
          return {
              arr:['我的地址','我的客服','店铺关注','评价有礼']
          }
      }
  }
  </script>
  
  <style lang="scss" scoped>
  .app{
      height: 100%;
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      background-color: #f5f5f5;
  }
  
  .app h3 {
      margin: 10px 0;
  }
  
  .app .text {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  
  .app .text .box {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      background-color: lightblue;
  }
  
  .app .text>div{
      display: flex;
  }
  
  .app .text>div .title {
      margin-left: 10px;
  }
  
  .app .text>div .title p {
      font-weight: bold;
  }
  
  .banner {
    margin: 10px;
  }
  .banner img {
    width: 100%;
    border-radius: 5px;
  }
  .hong {
      background-color: white;
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  
  .hong .bao {
      margin-left: 30px;
  }
  
  .hong .yv {
      margin-right: 30px;
  }
  
  .tools {
      background-color: white;
      margin: 10px 0;
      height: 100px;
      box-sizing: border-box;
  }
  
  .tools .biao {
      padding: 10px 10px;
      font-weight: bold;
  }
  
  .tools .dizhi span{
      display: inline-block;
      padding: 20px 10px;
  }
  
  </style>